<script setup>
import Cell from '@/components/cell/index.vue'
import CellItem from '@/components/cell-item/index.vue'
import UploadX from '@/components/upload-x/index.vue'
import CheckboxX from '@/components/checkbox-x/index.vue'
import ButtonX from '@/components/button-x/index.vue'
import {navigateTo} from '@/utils/uni-api-wrap/route'
import IconSimple from '@/components/icon-simple/index.vue'
import {useMeetingApply} from '@/hooks/useMeetingApply'
import {isInvalidData} from '@/utils/utils'
import {tip} from '@/utils/uni-api-wrap/toast'
import {isMPRelaxed} from '@/utils/validator'
import {usePages} from '@/hooks/usePages'
import {copy} from '@/utils/uni-api-wrap/sys'
import UniDataCheckboxX from '@/components/uni-data-checkbox-x/index.vue'

const { formData, genders, payChannels, submit, commonCheck } = useMeetingApply()

const submitBefore = () => {
  if (commonCheck()) {
    if (isInvalidData(formData.businessLicense)) return tip('公司执照不能为空')
    if (isInvalidData(formData.businessCard)) return tip('公司执照不能为空')
    submit(4)
  }
}
</script>

<template>
  <view class="page-container">
    <cell border text-align="left" class="mb32" :label-width="100">
      <cell-item type="input" label="姓名" sublabel="Your name" v-model="formData.firstName" placeholder="请输入姓名" />
      <cell-item required label="性别" sublabel="Gender">
        <template #default>
          <uni-data-checkbox-x v-model="formData.gender" :localdata="genders" />
        </template>
      </cell-item>
      <cell-item required type="input" label="手机号" sublabel="Phone number" input-type="number" :input-maxlength="11" v-model="formData.mobile" placeholder="请输入手机号" />
      <cell-item required type="input" label="公司名称" sublabel="Corporate Name" v-model="formData.companyName" placeholder="请输入公司名称" />
      <cell-item required type="input" label="职务" sublabel="Duties" v-model="formData.duties" placeholder="请输入职务" />
      <cell-item type="input" label="邮箱" sublabel="Email" v-model="formData.email" placeholder="请输入邮箱" />
      <cell-item type="input" label="备注" sublabel="Notes" v-model="formData.remark" placeholder="请输入备注" />
      <cell-item label="收费通道" sublabel="Toll channel">
        <template #default>
          <view style="padding-left: 24rpx" v-for="(item,index) in payChannels" :key="index">
            <view class="inline-block-middle" style="padding-right: 32rpx;">
              <text style="font-size: 36rpx;color: #333;">{{ item }}</text>
              <text style="font-size: 28rpx;color: #999;padding-left: 12rpx;">(微信同号)</text>
            </view>
            <view class="inline-block-middle" @click="copy(item)">
              <icon-simple class="inline-block-middle" name="copy" />
            </view>
          </view>
        </template>
      </cell-item>
    </cell>
    <cell border text-align="left" :label-width="100">
      <cell-item required label="公司执照" sublabel="Company License">
        <template #default>
          <upload-x :maxlength="1" v-model="formData.businessLicense" />
        </template>
      </cell-item>
      <cell-item required label="公司名片" sublabel="Name Card">
        <template #default>
          <upload-x :maxlength="1" v-model="formData.businessCard" />
        </template>
      </cell-item>
    </cell>
    <view class="agreement__container flex-row mtb32">
      <checkbox-x v-model="formData.accept" />
      <view class="agreement__context" @click="formData.accept = !formData.accept">
        <view class="agreement__text">阅读并同意<text class="text" @click.stop.prevent="() => navigateTo('/pages/about/index')">《相关条款》</text></view>
        <view class="agreement__subtext">I accept the terms in the license agreement</view>
      </view>
    </view>
    <button-x size="small" type="primary" @click="submitBefore">提交</button-x>
  </view>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  padding: 12rpx;
  box-sizing: border-box;
  background-color: #F2F2F2;
}
.agreement__container {
  align-items: flex-start;
  .agreement__text {
    @include fs28w400;
    text-align: left;
    .text {
      color: #5B7096;
    }
  }
  .agreement__subtext {
    font-size: 16rpx;
    color: $kaoyan-color-10;
  }
}
</style>
